<template>
    <div>
        <el-select v-model="list" :size="size" clearable :multiple="multiple" :collapse-tags="collapseTags"
            @change="onChange" placeholder="请选择资质">
            <el-option v-for="(item, index) in fieldList" :key="`field_${index}`" :label="item.fieldName" :value="item.fieldCode
            "></el-option>
        </el-select>
    </div>
</template>
<script>
import { customerFieldList } from '@/api/customer'
export default {
    name: "FieldSelect",
    props: {
        value: {
            type: [String, Number],
            default: "",
        },
        form: {
            type: Object,
            default: function () {
                return {}
            }
        },
        size: {
            type: String,
            default: 'small'
        },
        multiple: {
            type: Boolean,
            default: true,
        },
        collapseTags: {
            type: Boolean,
            default: true,
        }
    },
    data() {
        return {
            list: [],
            fieldList: []
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 获取列表
        async getList() {
            let res = await customerFieldList()
            console.log(res)
            this.fieldList = res.data || []
        },

        // 监听变化
        onChange(e) {
            console.log(e)
            let arr = this.fieldList;
            let form = JSON.parse(JSON.stringify(this.form));
            // 先删除所有的id
            arr.map(k => {
                delete form[k.fieldCode]
            })
            e.map(k => {
                form[k] = '有'
            })
            this.$emit('update:form', form)
        }
    }
}
</script>